<template>
    <div id="app">
        <div>
            <span>姓名:</span>
            <input type="text" 
            v-model.trim="name"
            />
        </div>
        <div>
            <span>年龄:</span>
            <input type="number" 
            v-model.number="age"
            />
        </div>
        <div>
            <span>性别:</span>
            <select v-model="sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <button @click="add"
            >添加/修改</button>
        </div>
        <div>
            <table border="1" cellpadding="10" cellspacing="0">
                <tr>
                    <th>序号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>操作</th>
                </tr>
                <tr v-for="item in list" :key="item.id">
                    <td> {{ item.id }} </td>
                    <td> {{ item.name }} </td>
                    <td> {{ item.age }} </td>
                    <td> {{ item.sex }} </td>
                    <td>
                        <button @click="del(item.id)"
                        >删除</button>
                        <button @click="editor(item.id)"
                        >编辑</button>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
export default {
    data() {
    return {
        list: [
            {
                id: 10,
                name: 'xm',
                age: 10,
                sex: '男',
            },
            {
                id: 11,
                name: 'xh',
                age: 11,
                sex: '女',
            },
            {
                id: 12,
                name: 'xhua',
                age: 12,
                sex: '男',
            },
        ],
        name: '',
        age: '',
        sex: '男',
        flog: ''
    }
    },

    methods: {
            //删除 
            del(id){
                this.list= this.list.filter(item => item.id !== id)
            },
            //编辑回显
            editor(id){
                let res = this.list.find(item => item.id === id)
                console.log(res);
                this.name = res.name
                this.age = res.age
                this.sex = res.sex
                this.flog = res
                console.log(this.flog);
            },
            // 添加或修改
            add(){
                
                if(this.name === '' || this.age < 1) return alert("请输入有效信息")

                if(this.flog === ''){
                    this.list.push({
                        id: parseInt(Math.random()*999999+12),
                        name: this.name,
                        age: this.age,
                        sex: this.sex
                    })
                } else {
                    this.flog.name = this.name
                    this.flog.age = this.age
                    this.flog.sex = this.sex
                }
                this.name = ''
                this.age = ''
                this.sex = '男'
                this.flog = ''
            }
        }
}
</script>
